<!DOCTYPE html>
<html ng-app="MyAPP">
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
        }
        li.item{
            display: block;
            margin-bottom:10px;
        }
        .green{
            color:#fff;
            border:1px solid green;
            background:green;
        }
        .red{
            color:#fff;
            border:1px solid red;
            background:red;
        }
        /*angular动画*/
        .item.ng-enter{
            animation: fadeId 2s linear;
        }
        @keyframes fadeIn {
            from{
                opacity: 0;
                font-size:12px;
            }
            to{
                opacity: 1;
                font-size:32px;
            }
        }

        /*li.ng-enter{*/
            /*transition: 0.3s ease all;*/
            /*opacity: 0;*/
            /*transform: translateY(10px);*/
        /*}*/
    </style>
</head>
<body>

<div class="container">
    <div ng-include src="'../common/header.html'"></div>
    <div class="row demo">
        <h3>Demo1: ng-submit示例</h3>

        <div ng-controller="HelloController">
            <p>
                <input type="text" ng-model="search">
            </p>
            <ul>
                <li class="item" ng-repeat="person in persons |filter:search |orderBy:'-age'" ng-class="{'green':person.age<=25,'red':person.age>30}">
                    {{person.name}}-{{person.age}}
                </li>
            </ul>
            <br>
            <form ng-submit="addPerson()">
                <input type="text" name="name" placeholder="姓名" ng-model="name">
                <input type="number" name="age" placeholder="年龄" ng-model="age">
                <button type="submit" class="btn btn-default">添加</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script src="//cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script src="//cdn.bootcss.com/angular.js/1.3.8/angular-animate.min.js"></script>
<script>
    var app=angular.module("MyAPP",['ngAnimate']);
    app.controller("HelloController",function($scope){
        $scope.persons=[
            {name:"zhangsah",age:20},
            {name:"lisi",age:23},
            {name:'wangwu',age:30},
            {name:'wangmazi',age:32},
            {name:'zhaosi',age:25},
        ];

        $scope.addPerson=function(){
            $scope.persons.push({name:$scope.name,age:$scope.age});
            $scope.name="";
            $scope.age=0;
        }
    });
</script>
